<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="css/登录.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css"> <!-- 加载远程 字体图标 -->
</head>

<body>
  <!-- 登录头部 -->
  <div class="xtx-login-header">
    <h1 class="logo"></h1>
    <a class="home" href="首页.html">进入网站首页</a>
  </div>
  <!-- 登录内容 -->
  <div class="xtx-login-main">
    <div class="wrapper">
      <form action="" autocomplete="off">
        <div class="box">
          <div class="切换-导航卡">
            <a href="javascript:;" class="下划线-颜色" data-id="0">账户登录</a>
            <a href="javascript:;" data-id="1">二维码登录</a>
          </div>
          <div class="导航卡版面">
            <div class="link">
              <a href="javascript:;">手机验证码登录</a>
            </div>
            <div class="input">
              <span class="iconfont icon-zhanghao"></span>
              <input required type="text" placeholder="请输入用户名称/手机号码" name="用户名">
            </div>
            <div class="input">
              <span class="iconfont icon-suo"></span>
              <input required type="password" placeholder="请输入密码" name="password">
            </div>
            <div class="agree">
              <label for="my-checkbox">
                <input type="checkbox" value="1" id="my-checkbox" class="复选框" name="同意">
                <span class="iconfont icon-xuanze"></span>
              </label>
              我已同意 <a href="javascript:;">《服务条款》</a> 和 <a>《服务条款》</a>
            </div>
            <div class="button clearfix">
              <button type="submit" class="登录">登 录</button>
              <!-- <a class="dl" href="./center.html">登 录</a> -->
              <a class="fl" href="./forget.html">忘记密码？</a>
              <a class="fr" href="注册.html">免费注册</a>
            </div>
          </div>
          <div class="导航卡版面" style="display: none;">
            <img class="code" src="./images/code.png" alt="">
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- 登录底部 -->
  <div class="xtx-login-footer">
    <!-- 版权信息 -->
    <div class="copyright">
      <p>
        <a href="javascript:;">关于我们</a>
        <a href="javascript:;">帮助中心</a>
        <a href="javascript:;">售后服务</a>
        <a href="javascript:;">配送与验收</a>
        <a href="javascript:;">商务合作</a>
        <a href="javascript:;">搜索推荐</a>
        <a href="javascript:;">友情链接</a>
      </p>
      <p>CopyRight &copy; 小兔鲜儿</p>
    </div>
  </div>


<script>
  // ------------ 切换导航选项卡 模块 -------------
  const 切换_导航卡 = document.querySelector('.切换-导航卡') // 获取DOM元素
  const 数组_导航卡版面 = document.querySelectorAll('.导航卡版面') // 导航卡，都是同名类  所以获取一个数组

  // 事件监听 使用事件委托方式
  切换_导航卡.addEventListener('click', function (事件对象) {
    // 检测点击了, 那个 a标签
    if (事件对象.target.tagName === 'A') {
      // 点击相应的,导航卡. 导航卡添加CSS类 (导航卡在 a标签里)
      // 原先标签有类名的,删除
      const 下划线_颜色 = document.querySelector('.下划线-颜色') // 获取DOM元素
      下划线_颜色.classList.remove('下划线-颜色') // 删除对应标签里的,CSS类
      事件对象.target.classList.add('下划线-颜色') // 添加你点击的 对应标签里的,CSS类

      // 切换 导航卡，显示不同版面
      // 额外说明: 因为标签里，都是同名类，不能通过类名识别
      // 我们先把 2个导航卡都设置隐藏，事件委托里我们点击那个 a标签，相应的导航卡在设置显示
      for (let i = 0; i < 数组_导航卡版面.length; i++) {
        数组_导航卡版面[i].style.display = 'none' // 显示:隐藏
      }
      // 点击的 导航卡 显示，   这里的 id 是，自定义属性，属性对应的值 当作数组的下标
      数组_导航卡版面[事件对象.target.dataset.id].style.display = 'block' // 显示:块级
    }
  })


  // ------------ 点击提交 模块 (本地存储 记录用户名 / 点击登录按钮 跳转到首页) --------------------
  // 获取DOM元素
  const form标签 = document.querySelector('form') // 所有 文本框和提交按钮, 都在 form 标签里,所以我们对这个标签 作监控
  const 复选框 = document.querySelector('.复选框')
  const 用户名 = document.querySelector('[name=用户名]') // 属性选择器

  // 监控 表单提交事件
  form标签.addEventListener('submit', function (事件对象) {
    事件对象.preventDefault() //阻止默认提交

    // 检查复选框 是否勾选.  checked 属性,检查是否勾选, true是勾选 false是没有勾选
    if (!复选框.checked) { // ! 是取反
      alert('请勾选,用户协议')
    }

    // 本地存储 存储用户名 (用来在首页里 显示用户名)
    const 用户名_字符串=用户名.value   // 获取文本框里,的内容
    localStorage.setItem('小兔鲜-用户名', 用户名_字符串) // 字符串存储到, 本地存储.  字符串就是用户名

    // 点击登录按钮 跳转到首页
    location.href = "./首页.html" // 赋值形式, JS控制页面跳转
  })

</script>

</body>

</html>